<template>
  <div class="main-box">
    <el-table
      :data="tableData"
      class="ydfw"
      border
      :header-cell-style="{
        'text-align': 'left',
        color: '#000',
        'border-color': '#ccffff',
        background: '#CCFFFF',
      }"
      max-height="744"
      :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
    >
      <el-table-column
        prop="date"
        label="平台名称"
        width="150"
      ></el-table-column>
      <el-table-column prop="name" label="版本号"></el-table-column>
      <el-table-column prop="address" label="功能" width="150">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            :content="
              scope.row.isConnected ? '点击以解绑' : '请在App上接入服务'
            "
            placement="left-start"
          >
            <!-- v-if="scope.$index !== 4" -->
            <el-button
              :type="scope.row.isConnected ? 'danger' : 'primary'"
              @click="unbindCloud(scope.row)"
              size="small"
              >{{ scope.row.isConnected ? "解绑平台" : "接入平台" }}
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="drdcbtn">
      <el-button type="primary" @click="backups">数据备份</el-button>
      <el-button type="primary" @click="importData">导入文件</el-button>
    </div>
  </div>
</template>
<script>
import Api from "@/api/api";

export default {
  data() {
    return {
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      tableData: [
        {
          id: 1,
          date: "海令云",
          name: "1.0.0.0",
          isConnected: false,
        },
        {
          id: 2,
          date: "华为云",
          name: "1.0.0.2",
          isConnected: false,
        },
        {
          id: 3,
          date: "腾讯云",
          name: "1.0.0.0",
          isConnected: false,
        },
        {
          id: 4,
          date: "涂鸦云",
          name: "1.0.0.0",
          isConnected: false,
        },
        {
          id: 5,
          date: "ROMA Link",
          name: "1.0.0.0",
          isConnected: false,
        },
      ],
    };
  },
  async created() {
    let res = await Api.query_cloud_platform_info({
      params: { sid: this.localSid },
    });
    this.tableData[1].name = res.result.cloud_platforms[0].sw_version;
    this.tableData[1].isConnected = res.result.cloud_platforms[0].bind;
    this.tableData[4].name = res.result.cloud_platforms[1].sw_version;
    this.tableData[4].isConnected = res.result.cloud_platforms[1].bind;
  },
  methods: {
    async unbindCloud(val) {
      console.log("我的大帅哥", val);
      if (val.isConnected) {
        let res = await Api.unbind_cloud_account({
          params: { sid: this.localSid, cloud_platform_id: val.id },
        });
        if (res.result.succeed) {
          let result = await Api.query_cloud_platform_info({
            params: { sid: this.localSid },
          });
          this.cloudList[1].version =
            result.result.cloud_platforms[0].sw_version;
          this.cloudList[1].isConnected = result.result.cloud_platforms[0].bind;
          this.cloudList[4].version =
            result.result.cloud_platforms[1].sw_version;
          this.cloudList[4].isConnected = result.result.cloud_platforms[1].bind;
          val.isConnected = false;
          this.$message({
            showClose: true,
            type: "success",
            message: "已解绑",
          });
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "解绑失败",
          });
        }
      }
    },
    // 数据备份
    async backups() {
      let res1 = await Api.export_config({
        params: { sid: this.localSid },
      });
      console.log(res1.result.config);
    },
    async importData() {
      let res2 = await Api.import_config({
        params: { sid: this.localSid, config: "{}" },
      });
      console.log(res2);
    },
  },
};
</script>
<style>
.main-box {
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  position: relative;
}
.ydfw {
  margin-left: 20px;
  width: calc(100vw - 270px);
  height: calc(100vh - 80px);
}
/* ::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}
::v-deep .el-table__body {
  width: 100% !important;
} */
::-webkit-scrollbar {
  display: none;
}
::v-deep .el-dialog__header {
  border-bottom: 2px solid rgb(219, 217, 215);
  text-align: left;
}
.ydbtn {
  display: inline-block;
}
.drdcbtn {
  position: fixed;
  right: 3%;
  bottom: 2%;
}
</style>
